<template>
<div class="topNav" v-show="$store.state.isShowNav">
  <div class="main-content">
    <div class="top_log">
      <img src="../img/logo/logo-c.png" alt="" style="width:70px;height:80px;margin-top: 25px;">
    </div>
    <div class="drop_content">
      <ul class="drop_menu">
        <li v-for="(item,index) in navList" :key="index" @mouseover="mouseover(item,index)" @mouseout="mouseleave" @click="changePath(item)">
          <a :class="currentPath == item.path ? 'drop_active': ''">{{item.name}}</a>
          <ul class="common_menu_dropdown" :class="{'show':isShow == index}">
            <div class="triangle_icon" v-if="index != 0"></div>
            <li @click="changeCurrentPath(itemT)" class="common_menu_item" v-for="(itemT,indexT) in subList" :key="indexT">
              <!-- <router-link :to="itemT.path" class="path">{{itemT.name}}</router-link> -->
              <span>{{itemT.name}}</span>
              <div class="child-container" v-if="itemT && itemT.children && itemT.children.length > 0">
                <ul class="child-wrapper">
                  <li v-for="(child,index) in itemT.children" :key="index" class="child-item" @click="junpTp(child)">
                    <a  style="width:100%;height:100%;">{{ child.name }}</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'topNav',
  data() {
    return {
      currentPath: '/home',
      currentSubPath: '',
      subList: [],
      isShow: '',
      acriveIndex: 0,
      navList: [{
          name: '首页',
          path: '/home'
        },
        {
          name: '动态新闻',
          path: '/hyzx',
          // subList: [
          //   {
          //     name: '数字资产',
          //     path: '/digitalAsset',
          //     parentpath: '/hyzx'
          //   },
          //   {
          //     name: '社区论坛',
          //     path: '/communityForum',
          //     parentpath: '/hyzx'
          //   },
          //   {
          //     name: '行业应用',
          //     path: '/industryApplication',
          //     parentpath: '/hyzx'
          //   }
          // ]
        },
        {
          name: '产品服务',
          path: '/cpfw',
          // subList: [
          //   {
          //     name: '公链开发',
          //     path: '',
          //     parentpath: '',
          //     children: [
          //       {
          //         name: 'IKEC',
          //         path: '',
          //         parentpath: '',
          //         href: 'www.ikec.io'
          //       },
          //       {
          //         name: '学友链',
          //         path: '',
          //         parentpath: '',
          //         href: 'www.fc666.io'
          //       },
          //       {
          //         name: '万维链',
          //         path: '',
          //         parentpath: '',
          //         href: 'www.wwc666.io'
          //       },
          //     ]
          //   },
          //   {
          //     name: '钱包服务',
          //     path: '/walletService',
          //     parentpath: '/cpfw'
          //   },
          //   {
          //     name: '交易系统',
          //     path: '/tradingSystem',
          //     parentpath: '/cpfw'
          //   },
          //   {
          //     name: '区块链浏览器',
          //     path: '/blockchainBrowser',
          //     parentpath: '/cpfw'
          //   },
          //   {
          //     name: '节点快照',
          //     path: '/downPkb',
          //     parentpath: '/cpfw'
          //   },
          //   {
          //     name: '区块链溯源系统',
          //     path: '/chainTraceabilitySystem',
          //     parentpath: '/cpfw'
          //   },
          //   {
          //     name: '智能合约和DAPP',
          //     path: '/dapp',
          //     parentpath: '/cpfw'
          //   }
          // ]
        },
        {
          name: '关于我们',
          path: 'about',
          // subList: [{
          //     name: '公司简介',
          //     path: '/companyProfile',
          //     parentpath: '/gywm'
          //   },
          //   {
          //     name: '动态新闻',
          //     path: '/dynamicNews',
          //     parentpath: '/gywm'
          //   },
          //   {
          //     name: '合作伙伴',
          //     path: '/cooperativePartner',
          //     parentpath: '/gywm'
          //   },
          //   {
          //     name: '团队建设',
          //     path: '/teamBuilding',
          //     parentpath: '/gywm'
          //   },
          //   {
          //     name: '联系我们',
          //     path: '/contactUs',
          //     parentpath: '/gywm'
          //   }
          // ]
        },
        {
          name: '节点快照',
          path: '/downPkb',
          // subList: [{
          //     name: '开源代码',
          //     path: '/openSourceCode',
          //     parentpath: '/wdzx',
          //   },
          //   {
          //     name: '开发工具',
          //     path: '/developmentTool',
          //     parentpath: '/wdzx',
          //   },
          //   {
          //     name: '技术交流',
          //     path: '/exchangeOfSkills',
          //     parentpath: '/wdzx',
          //   },
          //   {
          //     name: '合约开放平台介入',
          //     path: '/platformAccess',
          //     parentpath: '/wdzx',
          //   }
          // ]
        }
      ]
    }
  },
  computed: {
    ...mapState(['fullpage'])
  },
  mounted() {},
  watch: {
      $route: {
        handler(nv, ov) {
          this.currentPath = nv.path
        },
        deep: true,
        immediate: true,
      },
  },
  methods: {
    
    junpTp(child) {
      window.location.href = 'http://' + child.href
    },
    changePath(item) {
      
      if (item.path == 'about') {
        this.$nextTick( () => {
          setTimeout( () => {
            this.fullpage && this.fullpage.api.moveTo(5);
            this.currentPath = 'about'
          })
          
        })
        
        
        this.$router.push('/home');
        return 
      }
      if (item.path === '/home') {
        this.$nextTick( () => {
          this.fullpage && this.fullpage.api.moveTo(1);
        })
        
        this.currentPath = '/home'
        this.$router.push('/home');
        return
      }
      this.$router.push(item.path);
    },
    changeCurrentPath(item) {
      
      this.currentPath = item.parentpath
      this.$router.push(item.path)
      this.isShow = -1;
    },
    mouseover(item, index) {
      this.isShow = index;
      this.subList = this.getSubList(item.path);
    },
    mouseleave(item) {
      this.isShow = -1;
    },
    getSubList(path) {
      let index = this.navList.findIndex(item => item.path === path);
      if (index > -1) {
        return this.navList[index].subList || [];
      } else {
        return [];
      }
    },
  }
}
</script>

<style lang="less" scoped>
.topNav {
  width: 100%;
  // height: 120px;
  height: 12%;
  position: fixed;
  z-index: 99;
  min-height: 80px;

  .child-container {
    padding-left: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
    right: -100%;
    bottom: 0;
    display: none;
  }

  .child-item:hover {
    border-radius: 10px;
    background-color: #3f3f44;

    a {
      color: #009bda;
    }
  }

  .child-wrapper {
    background-color: #34333A;
    width: calc(100% - 10px);
    margin-left: 10px;
    height: 100%;
    border-radius: 10px;

    &>li {
      width: 100%;
      height: 36px;
      line-height: 36px;

      a {
        color: #fff;
      }
    }
  }

  &>.main-content {
    height: 100%;

    .top_log {
      position: absolute;
      left: 18.75%;
      top: 1.8%;
      width: 6.25%;

      .top_log img {
        width: 100%;
      }
    }

    .drop_content {
      height: 100%;

      .drop_menu {
        z-index: 99;
        // width: 720px;
        width: 37.5%;
        height: 100%;
        position: absolute;
        left: 46.88%;

        &>li:nth-child(1) {
          margin-left: 0 !important;
        }

        &>li {
          white-space: nowrap;
          float: left;
          text-align: center;
          line-height: 57px;
          position: relative;
          padding: 2.63% 5.1%;
          cursor: pointer;

          &:hover {
            // background-color: #26252E;
          }

          &>a {
            color: rgba(255, 255, 255, 1);
            opacity: 0.3;
            font-size: 0.938vw;
            font-weight: 400;
          }
          &>a {
            transition: all ease .3s;
          }
          &>a:hover {
            display: inline-block;
            height: 57px;
            font-weight: 400;
            font-size: 0.938vw;
            color: rgba(255, 255, 255, 1);
            border-bottom: 2px solid#FFFFFF;
            opacity: 1;
            box-sizing: border-box;
          }

          &>.common_menu_dropdown {
            display: none;
            // position: absolute;
            // left: 50%;
            // transform: translateX(-50%);
            // // width: 200px;
            // // height: 168px;
            // width: 130%;
            // // height: 100%;
            // margin-top: 12.8%;
            // display: none;
            // background-color: #34333A;
            // border-radius: 10px;
            // z-index: 99;

            &>.common_menu_item {
              width: 100%;
              height: 5.6vh;
              cursor: pointer;
              color: rgba(255, 255, 255, 1);
              font-size: 0.9375vw;
              font-weight: 400;
              display: flex;
              justify-content: center;
              align-items: center;

              &:hover .child-container {
                display: block;
              }
            }

            &>.common_menu_item:hover {
              background-color: #3F3F45;
              font-size: 0.9375vw;
              font-weight: 400;
              color: rgba(0, 174, 255, 1);
              border-radius: 10px;
            }

            &>.triangle_icon {
              width: 10px;
              height: 10px;
              background-color: #34333A;
              transform: rotate(45deg);
              position: absolute;
              top: -5px;
              left: 50%;
              margin-left: -5px;
              text-align: center;
              z-index: -1;
            }
          }
          
          .drop_active {
            display: inline-block;
            height: 57px;
            font-weight: 400;
            font-size: 0.938vw;
            color: rgba(255, 255, 255, 1);
            border-bottom: 2px solid#FFFFFF;
            opacity: 1;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}

.show {
  // display: block !important;
}
</style>
